<!--
 * @Author: your name
 * @Date: 2022-03-06 20:16:46
 * @LastEditTime: 2022-04-09 14:05:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\message\Message.vue
-->
<template>
  <div class="message">
    <p>有什么话对管理员说的，在这里你可以尽情的说!</p>
    <el-button type="success" @click="releaseMessage" class="release-btn"
      >我想说</el-button
    >
    <template v-if="messages.length > 0">
      <el-timeline>
        <el-timeline-item
          v-for="item in messages"
          :key="item.id"
          :timestamp="formatTime(item.create_time)"
          placement="top"
        >
          <el-card class="card">
            <div class="card-wrap">
              <span class="content">内容：{{ item.content }}</span>
              <el-button
                type="danger"
                @click="deleteMessage(item, index)"
                size="small"
                class="btn"
                >删除</el-button
              >
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </template>

    <!-- 发布的组件 -->
    <release :releaseDialogVisible.sync="releaseDialogVisible" />
  </div>
</template>

<script>
// 导入本地存储的函数
import db from '@/util/localstorage'
// 导入接口
import { getMessages, deleteMessage } from '@/api/message.js'
// 导入组件
import Release from './release/release.vue'
export default {
  name: 'Diary',
  data() {
    return {
      content: '',
      user: {},
      messages: [],
      releaseDialogVisible: false
    }
  },
  components: {
    Release
  },
  created() {
    this.user = db.get('user')
    this.getMessages()
  },
  methods: {
    releaseMessage() {
      this.releaseDialogVisible = true
    },
    formatTime(time) {
      return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取评论
    getMessages() {
      getMessages({ user_id: this.user.id }).then((res) => {
        console.log('用户发布的留言为------------:', res)
        this.messages = res.result
        // 将数据保存到vuex
        this.$store.commit('message/setMessages', res.result)
      })
    },
    // 删除评论
    deleteMessage(item, index) {
      console.log('item', item)
      this.$confirm(`将删除该评论, 是否继续?`, '删除', {
        type: 'warning'
      }).then(() => {
        deleteMessage({ id: item.id }).then((res) => {
          console.log('删除评论', res)
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getMessages()
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-timeline {
  padding: 0;
}
.release-btn {
  margin-bottom: 20px;
}
.card {
  .card-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
